@use 'sass:map';
@use 'sass:math';

html.light {
  --card-bg: white;
  $el-bg: white;

  $colors: (
          'white': #ffffff,
          'black': #000000,
          'primary': #50d2a0,
          'success': #67c23a,
          'warning': #e6a23c,
          'danger': #f56c6c,
          'error': #f56c6c,
          'info': #909399,
          'secondary': #409eff,
          'accent': #f56c6c,
          'new-color1': #ff4500, // 新颜色1
          'new-color2': #00ff00, // 新颜色2
          'new-color3': #0000ff, // 新颜色3

  );

  $color-black: map.get($colors, 'black');
  --el-color-black: #{$color-black};

  @each $type in map.keys($colors) {
    $color: map.get($colors, $type);
    --el-color-#{$type}: #{$color};
    @each $i in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10) {
      $weight: math.percentage(math.div($i, 10));
      $light-color: mix($el-bg, $color, $weight);
      $dark-color: mix(#000000, $color, $weight);
      --el-color-#{$type}-light-#{$i}: #{$light-color};
      --el-color-#{$type}-dark-#{$i}: #{$dark-color};
    }
  }
}